<!-- 底部信息 -->
<template>
  <div class="sw-footer">
    <div class="sw-back">
      <div class="foot-content">
        <div class="footer-left">
          <div class="footer-top">
            <div><h2>链接国际：</h2></div>
              <div class="int-onlyimg-larger">
                <img src="@/assets/components/foot1.png" alt="" />
              </div>
              <div class="int-onlyimg-larger foot2">
                <img src="@/assets/components/foot2.png" alt="" />
              </div>
              <div class="int-onlyimg-larger">
                <img src="@/assets/components/foot3.png" alt="" /> 
              </div>
          </div>
          <h3><img src="@/assets/components/te.png" alt="" />TEL：400-0881769</h3>
          <h4>地址：深圳市龙华区 清湖地铁站 国际金銮大厦19楼</h4>
          <h4>市场合作：18600001769 邮箱：bd@nemoswim.net</h4>
          <h4>Copyright 2020 , 尼莫亲子游泳俱乐部，All Rights Reserved</h4>
          <h4>
            水薇游（天津）企业管理咨询有限公司&nbsp;&nbsp;津ICP备20004907号-1
          </h4>
        </div>
        <div class="footer-right">
          <div class="local">
            <baidu-map class="map" :center="markerPoint" :zoom="16">
              <bm-marker :position="markerPoint" :dragging="false" @click="infoWindowOpen">
                <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 13px">
                  尼莫游泳俱乐部 <br /><br />
                  地址:深圳市龙华区清湖地铁站金銮国际大厦
                </bm-info-window>
              </bm-marker>
            </baidu-map>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
        markerPoint:{lng: 114.042363, lat:22.669961},
        show:false
    };
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  }
};
</script>
<style lang="scss">
.sw-footer {
  width: 100%;
  background-color: rgb(11, 83, 148);
  .sw-back {
    width: 100%;
    margin: 0 auto;
    background-image: url(../../assets/components/footer.png);
    background-repeat: no-repeat;
    background-position: center;
    .foot-content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .footer-left {
        width: 600px;
        padding: 15px;
        .footer-top {
          display: flex;
          margin: 30px 0 40px 23px;
          h2 {
            font-weight: 600;
            color: #FFFFFF;
            font-size: 28px;
            line-height: 125px;
          }
          .int-onlyimg-larger{
            height: 120px;
            overflow: hidden;
            border-radius: 5%;
            &:hover{
              img{
                cursor: pointer;
                transform: scale(1.1);
                transition: all .35s ease;
              }
            }
          }
          .foot2 {
            margin: 0 25px;
          }
        }
        h3 {
          color: white;
          font-size: 24px;
          font-weight: 400;
          margin: 20px;
          img {
            margin-right: 20px;
          }
        }
        h4{
          color: white;
          margin: 20px;
        }
      }
      .footer-right {
        width: 570px;
        padding: 15px 0;
        margin-left: 100px;
        .local {
          width: 522px;
          height: 501px;
          border-radius: 17px;
          padding-top: 20px;
          background-color: #B3C4D7;
          .map{
            width:480px;
            height: 480px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>